@import './variables';

// Apply content padding, based on device size
@mixin contentPadding($paddingTop:0px, $paddingBottom:$contentPaddingBottom) {
  padding: $paddingTop $contentPadding-sm $paddingBottom $contentPadding-sm;

  @media screen and (min-width: $uhf-screen-min-mobile) {
    padding: $paddingTop $contentPadding-lg $paddingBottom $contentPadding-lg;
  }

  @media screen and (min-width: $ms-screen-min-xl) {
    padding: $paddingTop $contentPadding-xl $paddingBottom $contentPadding-xl;
  }
}

// High contrast mode mixins
// @todo: Shouldn't these, and the color variables, be in Fabric Core?
@mixin high-contrast {
  @media screen and (-ms-high-contrast: active) {
    @content;
  }
}

// Overrides the browser's default focus outline style.
@mixin focus-outline($inset: 0, $width: $ms-focus-border-width, $color: $ms-focus-border-color) {
  // Only do this when it's a child of ms-Fabric in a focusVisible state.
  :global(.ms-Fabric--isFocusVisible) &:focus {
    outline: $width $ms-focus-border-style $color;
    outline-offset: -$inset;
  }
}
